Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form Input: Don't use flex-direction: row-reverse for checkbox field #64232

Merged
merged 11 commits into from
Sep 12, 2024

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Aug 4, 2024

Follow up #63081

What?

This PR dynamically changes the markup to remove flex-direction: row-reverse; from the Form Input block.

Why?

In #63081, a stylelint rule was added to disallow flex-direction reverse values.

In the Form Input block, flex-direction: row-reverse; is applied to place text after the checkbox element. Currently, it is allowed with a disable comment, but ideally, this rule should not be used.

How?

If the type attribute is checkbox or radio, place the label after the input element. This means that the HTML will be changed to the following:

<!-- From -->
<div class="wp-block-form-input">
	<label class="wp-block-form-input__label">
		<span class="wp-block-form-input__label-content">Label</span>
		<input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/>
	</label>
</div>

<!-- To -->
<div class="wp-block-form-input">
	<label class="wp-block-form-input__label">
		<input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/>
		<span class="wp-block-form-input__label-content">Label</span>
	</label>
</div>

Also added block deprecation since we are updating the save function.

Note: Updating the HTML for the Form Input block was once attempted in #63081, but was ultimately removed due to the need for block deprecation. The code in this PR is based on this commit.

Testing Instructions

  • Switch to the trunk branch.
  • Through the code editor, insert the following HTML and save the post. This is a single Form Input block, and the input element is a checkbox:
    <!-- wp:form-input {"type":"checkbox"} -->
    <div class="wp-block-form-input">
    	<label class="wp-block-form-input__label">
    		<span class="wp-block-form-input__label-content">Label</span>
    		<input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/>
    	</label>
    </div>
    <!-- /wp:form-input -->
  • On the front end, make sure the checkbox is ordered first, then the label.
  • Switch to the form-input/remove-row-reverse branch.
  • Reload the browser on the front end.
  • The order of the checkbox and the label should remain unchanged.
  • Open the post editor, update the checkbox label, and save the post. The markup will be updated as follows:
    <!-- wp:form-input {"type":"checkbox"} -->
    <div class="wp-block-form-input">
    	<label class="wp-block-form-input__label">
    		<input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/>
    		<span class="wp-block-form-input__label-content">Label</span>
    	</label>
    </div>
    <!-- /wp:form-input -->
  • Reload the browser on the front end.
  • The order of the checkbox and the label should remain unchanged.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Block] Form (experimental) Affects the form block labels Aug 4, 2024
@t-hamano t-hamano self-assigned this Aug 4, 2024
Copy link

github-actions bot commented Aug 4, 2024

Size Change: +216 B (+0.01%)

Total Size: 1.78 MB

Filename Size Change
build/block-library/blocks/form-input/style-rtl.css 357 B +15 B (+4.39%)
build/block-library/blocks/form-input/style.css 357 B +15 B (+4.39%)
build/block-library/index.min.js 217 kB +150 B (+0.07%)
build/block-library/style-rtl.css 14.9 kB +18 B (+0.12%)
build/block-library/style.css 14.8 kB +18 B (+0.12%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.31 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.57 kB
build/block-editor/content.css 4.56 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/index.min.js 257 kB
build/block-editor/style-rtl.css 16.3 kB
build/block-editor/style.css 16.3 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 265 B
build/block-library/blocks/button/editor.css 265 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-author-name/style-rtl.css 72 B
build/block-library/blocks/comment-author-name/style.css 72 B
build/block-library/blocks/comment-content/style-rtl.css 120 B
build/block-library/blocks/comment-content/style.css 120 B
build/block-library/blocks/comment-date/style-rtl.css 65 B
build/block-library/blocks/comment-date/style.css 65 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 228 B
build/block-library/blocks/comments-pagination/editor.css 217 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 641 B
build/block-library/blocks/cover/editor.css 642 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 331 B
build/block-library/blocks/embed/editor.css 331 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 955 B
build/block-library/blocks/gallery/editor.css 958 B
build/block-library/blocks/gallery/style-rtl.css 1.83 kB
build/block-library/blocks/gallery/style.css 1.82 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 344 B
build/block-library/blocks/group/editor.css 344 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 894 B
build/block-library/blocks/image/editor.css 892 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 179 B
build/block-library/blocks/latest-posts/editor.css 179 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/loginout/style-rtl.css 61 B
build/block-library/blocks/loginout/style.css 61 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 644 B
build/block-library/blocks/navigation-link/editor.css 645 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.2 kB
build/block-library/blocks/navigation/editor.css 2.2 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author-biography/style-rtl.css 74 B
build/block-library/blocks/post-author-biography/style.css 74 B
build/block-library/blocks/post-author-name/style-rtl.css 69 B
build/block-library/blocks/post-author-name/style.css 69 B
build/block-library/blocks/post-author/editor-rtl.css 107 B
build/block-library/blocks/post-author/editor.css 107 B
build/block-library/blocks/post-author/style-rtl.css 188 B
build/block-library/blocks/post-author/style.css 189 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 527 B
build/block-library/blocks/post-comments-form/style.css 528 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-content/style-rtl.css 79 B
build/block-library/blocks/post-content/style.css 79 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 155 B
build/block-library/blocks/post-excerpt/style.css 155 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 347 B
build/block-library/blocks/post-featured-image/style.css 347 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 225 B
build/block-library/blocks/query-pagination/editor.css 215 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 236 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 199 B
build/block-library/blocks/search/editor.css 199 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-tagline/style-rtl.css 65 B
build/block-library/blocks/site-tagline/style.css 65 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/site-title/style-rtl.css 90 B
build/block-library/blocks/site-title/style.css 90 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 757 B
build/block-library/blocks/social-links/editor.css 756 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table-of-contents/style-rtl.css 83 B
build/block-library/blocks/table-of-contents/style.css 83 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 144 B
build/block-library/blocks/tag-cloud/editor.css 144 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 368 B
build/block-library/blocks/template-part/editor.css 368 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 396 B
build/block-library/blocks/video/editor.css 397 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.8 kB
build/block-library/editor.css 11.8 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/theme-rtl.css 708 B
build/block-library/theme.css 712 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 52.4 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.82 kB
build/core-data/index.min.js 73.2 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 12.7 kB
build/edit-post/style-rtl.css 2.31 kB
build/edit-post/style.css 2.31 kB
build/edit-site/index.min.js 217 kB
build/edit-site/posts-rtl.css 7.28 kB
build/edit-site/posts.css 7.28 kB
build/edit-site/style-rtl.css 12.6 kB
build/edit-site/style.css 12.6 kB
build/edit-widgets/index.min.js 17.7 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/editor/index.min.js 101 kB
build/editor/style-rtl.css 9.28 kB
build/editor/style.css 9.29 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.09 kB
build/format-library/style-rtl.css 476 B
build/format-library/style.css 476 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.4 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.78 kB
build/interactivity/index.min.js 13.2 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.61 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.34 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 554 B
build/preferences/style.css 554 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.55 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.04 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.2 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@t-hamano t-hamano marked this pull request as ready for review August 4, 2024 08:32
@t-hamano t-hamano requested a review from ajitbohra as a code owner August 4, 2024 08:32
Copy link

github-actions bot commented Aug 4, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: aristath <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: ciampo <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @t-hamano 👍

After manually testing this one, it is mostly working for me with the exception of the bug you noted with the default block class name being saved as a custom class name. I think that might be related to a misconfiguration of the deprecation supports.

I've left some minor inline comments relating to the new deprecation.

The last thing I noticed is that the original deprecation's fixtures weren't updated. All deprecations have to bring that version of the block up to the latest markup.

This should mean the original v1 deprecation's serialized HTML fixture needed an update. The fact that it didn't and passes might indicate there's another issue here.

packages/block-library/src/form-input/deprecated.js Outdated Show resolved Hide resolved
packages/block-library/src/form-input/deprecated.js Outdated Show resolved Hide resolved
packages/block-library/src/form-input/deprecated.js Outdated Show resolved Hide resolved
@aristath
Copy link
Member

aristath commented Aug 9, 2024

I think this might be related to #55755 as well...

@t-hamano
Copy link
Contributor Author

Thanks for the review!

Trunk doesn't disable className support. This might be the cause of the bug noted in #64232 (comment)

This was probably the cause 😅 I removed this and the fixture was generated as expected.

The last thing I noticed is that the original deprecation's fixtures weren't updated. All deprecations have to bring that version of the block up to the latest markup.

This PR only updates markup if the type attribute is radio or checkbox. But the type attribute of the v1 fixture is text. I think this is the reason why the serialized v1 fixture is not updated.

@aaronrobertshaw
Copy link
Contributor

This PR only updates markup if the type attribute is radio or checkbox. But the type attribute of the v1 fixture is text. I think this is the reason why the serialized v1 fixture is not updated.

Thanks for the explanation, it probably means we're missing some fixtures to cover all bases for the block.

@t-hamano
Copy link
Contributor Author

I have included blocks with text, radio and checkbox attributes in both v1 and v2. All deprecations appear to work as expected.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the quick work adding the extra fixtures @t-hamano 🚀

I have a couple of suggestions for the new fixtures though.

Like other unit tests, limiting the scope of each test to a single use case is generally beneficial. Other existing blocks limit their fixtures to a single block configuration per fixture e.g. image custom link, media link, captions etc. all getting their own fixture. The different types of form input likely warrant their own independent fixture.

Another benefit in structuring fixtures this way is that it's easier to find relevant fixtures to update when the next deprecation needs to be implemented.

While breaking down the updated v1 fixtures, it might be better to add base fixtures for the block rather than include them under the v1 fixtures. For example: core__form-input__radio, core__form-input__checkbox etc..

This gives a little more flexibility for deprecation fixtures to only target block configurations that are impacted by the relevant deprecation.

What do you think?

@t-hamano
Copy link
Contributor Author

Sounds like a good idea!

I've split it into all available types as variations, but should we remove fixtures that aren't affected by the deprecation?

Copy link

Flaky tests detected in 8db2101.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10413264875
📝 Reported issues:

@aaronrobertshaw
Copy link
Contributor

I've split it into all available types as variations, but should we remove fixtures that aren't affected by the deprecation?

Sorry I wasn't more clear with my suggestion @t-hamano.

I was only suggesting that we had a default or base fixture for each of the different form input types. The deprecation fixtures can be specific to the use case or type they are relevant for e.g. the v2 deprecation fixture could only be a checkbox and/or radio as that's the main focus of the change.

Some of the input types are just a change of attribute on the input element so maybe those those don't need their own fixture e.g. url, tel etc.

I'm probably missing some but maybe we just need base fixtures for:

  • core__form-input.html (text type, which also pretty much covers url, tel etc)
  • core__form-input__checkbox.html
  • core__form-input__radio.html
  • core__form-input__textarea.html

Does that help clarify things? If not I'm happy to try again 😅

@t-hamano
Copy link
Contributor Author

I reorganized it into the following four fixtures.

Are there any fixtures that we don't need? Sorry if I didn't understand 😅

  • core__form-input__deprecated-v1.html
  • core__form-input__deprecated-v2.html
  • core__form-input__radio__deprecated-v1.html
  • core__form-input__radio__deprecated-v2.html
  • core__form-input__checkbox__deprecated-v1.html
  • core__form-input__checkbox__deprecated-v2.html
  • core__form-input__textarea__deprecated-v1.html
  • core__form-input__textarea__deprecated-v2.html

@aaronrobertshaw
Copy link
Contributor

Sorry if I didn't understand 😅

It's probably more that I'm not explaining the fixtures I'm proposing very well, without listing every file out individually.

Are there any fixtures that we don't need?

After the latest change, we're still missing the base fixtures for the different input types as outlined in #64232 (comment).

core__form-input.html (text type, which also pretty much covers url, tel etc)
core__form-input__checkbox.html
core__form-input__radio.html
core__form-input__textarea.html

These cover the latest (current) version of the block.

The v2 deprecation was only for checkbox and radio inputs, correct? So the deprecation fixtures for v2 probably don't need ones for textarea or other input types that aren't effected. This what I meant by this comment:

The deprecation fixtures can be specific to the use case or type they are relevant for e.g. the v2 deprecation fixture could only be a checkbox and/or radio as that's the main focus of the change.

We don't have to follow my recommendation if you don't agree with it. If you do, what I think is left is to:

  1. Create base fixtures for a generic text input, checkbox, radio, and textarea. These are not fixtures for deprecations, just the current block version.
  2. Remove the deprecation fixtures for input types unrelated to the deprecation. If a block's markup isn't changed from the base fixture, it's already covered for the deprecation.

If this isn't making things clearer, I can carve out some time early next week to create a diff or push a commit here if it helps.

@t-hamano
Copy link
Contributor Author

I removed the fixtures that I deemed unnecessary. The current fixtures consist of:

  • v1: This deprecation is required for all form element types because it adds the useBlocksProps to the save function (#56507)
    • core__form-input__deprecated-v1.html: Includes default, email, number, tel, url types
    • core__form-input__radio__deprecated-v1.html
    • core__form-input__checkbox__deprecated-v1.html
    • core__form-input__textarea__deprecated-v1.html
  • v2: This is the target of this PR, swapping the input and label elements. This deprecation only affects the radio and checkbox types.
    • core__form-input__radio__deprecated-v2.html
    • core__form-input__checkbox__deprecated-v2.html

If I'm still misunderstanding, feel free to push 🙏

@aaronrobertshaw
Copy link
Contributor

Thanks @t-hamano

  1. Create base fixtures for a generic text input, checkbox, radio, and textarea. These are not fixtures for deprecations, just the current block version.

⬆️ This is the bit still missing

If I'm still misunderstanding, feel free to push 🙏

Unfortunately, I might not be able to get to this before I'm AFK until the 10th September.

@t-hamano
Copy link
Contributor Author

@aaronrobertshaw Thanks for the reply.

This PR is not something that needs to be rushed, so I would be happy if you could take a look at it again when you have time.

t-hamano and others added 4 commits August 28, 2024 17:12
All variations of the simple texts input field are added here to match the approach taken in the deprecation fixtures.
@aaronrobertshaw aaronrobertshaw force-pushed the form-input/remove-row-reverse branch from e031a00 to c222f88 Compare August 28, 2024 10:45
@aaronrobertshaw
Copy link
Contributor

@t-hamano I've rebased this and pushed some base fixtures for the various form input types. I've also aligned the default fixture with how you combined all the text, email, number, tel, url inputs in the deprecation fixtures.

Given I've contributed the last couple of commits, I'd like to get a fresh set of eyes on this PR for final approval.

@andrewserong if you can spare a moment to review this, that would be greatly appreciated 🙏

From my end, I think this should be good to go!

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the ping!

In testing this locally I noticed that the removal of the CSS rule means that any unmigrated content that is already on a site will continue to display in the other order until going in to a post and updating / saving so that the migration is run.

The deprecation runs correctly in the editor:

image

However prior to running that deprecation in the editor, this is how requests to the site frontend looked with this PR applied:

After adding a paragraph to the post and saving, the update takes effect as expected:

I see this block is still gated behind an experimental feature flag. Does that mean it's safe to make this change because no-one's using it in production sites? Or do we still need to handle markup that's already out in the wild and hasn't been migrated via the deprecation?

Aside from that, code-wise this change LGTM.

@t-hamano
Copy link
Contributor Author

@aaronrobertshaw Thanks for the update! By looking at your commits, I was able to understand your intentions.

In testing this locally I noticed that the removal of the CSS rule means that any unmigrated content that is already on a site will continue to display in the other order until going in to a post and updating / saving so that the migration is run.

This is likely to occur for all blocks whose save function has been updated.

I know some approaches that leave CSS in place for backward compatibility, but I don't know of any clear standards for how much old markup should be supported with CSS.

Personally, I feel that for form blocks, it's enough to just ensure that the block doesn't break.

If we want to add CSS that takes old markup into account, you can use the following approach:

// The old markup, i.e. if there is an input element after the label content, reverse the order as before.
.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type="checkbox"]) {
	flex-direction: row-reverse;
}

@andrewserong
Copy link
Contributor

This is likely to occur for all blocks whose save function has been updated.
I know some approaches that leave CSS in place for backward compatibility, but I don't know of any clear standards for how much old markup should be supported with CSS.

From my perspective, if it's a block that's used in production, it probably either needs CSS that we keep around pretty much forever (as we can't guarantee that old post content on big sites will ever be migrated), or use a server-side approach to dynamically update old markup when the block is rendered.

For the Form blocks, since it's behind an experiment, I imagine it's not so important because the blocks aren't being used in production anywhere? I'm not certain of this assumption, though, so I'll just ping @WordPress/gutenberg-core for visibility on that question.

@ntsekouras
Copy link
Contributor

From my perspective, if it's a block that's used in production, it probably either needs CSS that we keep around pretty much forever (as we can't guarantee that old post content on big sites will ever be migrated), or use a server-side approach to dynamically update old markup when the block is rendered.

Yes, we should keep even the CSS for changes in blocks for back compat.

Personally, I feel that for form blocks, it's enough to just ensure that the block doesn't break.

I'd echo this, since it's an experiment.. Also if the css rule is something really simple and would keep the old version as is, I don't see why not add it.

@t-hamano
Copy link
Contributor Author

Thank you for the feedback, everyone! I've added some CSS for the old markup.

I've also updated the Testing Instructions section so you can test it.

@ciampo
Copy link
Contributor

ciampo commented Aug 30, 2024

@t-hamano , I was reading the PR description and got confused by the "From" -> "To" code snippet in the "How" section, since the two snippets are identical. Is that a typo? We should update it so that folks visiting this PR can have a better comprehension of its changes :) Thank you!!

@t-hamano
Copy link
Contributor Author

@ciampo Thanks for letting me know! That was definitely a typo. I updated it correctly.

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the patience and iteration here @t-hamano. I definitely appreciate this became more involved than expected.

✅ Deprecated version continues to render correctly on the frontend prior to migration
✅ Migration of deprecated version in the editor works as advertised
✅ Migrated block appears correctly on frontend once saved
✅ Deprecation and block fixtures look good and all pass

LGTM 🚢

@andrewserong
Copy link
Contributor

Thanks for the patience and iteration here

+1 — my apologies, I meant to come back to this PR and it totally slipped my mind. Thanks for all the follow-up!

@t-hamano
Copy link
Contributor Author

Thank you everyone for the reviews 🙇‍♂️

@t-hamano t-hamano merged commit 297e9ca into trunk Sep 12, 2024
62 checks passed
@t-hamano t-hamano deleted the form-input/remove-row-reverse branch September 12, 2024 11:08
@github-actions github-actions bot added this to the Gutenberg 19.3 milestone Sep 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Form (experimental) Affects the form block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants